<template>
  <div class="space-y-5 mb-5">
    <div class="text-2xl font-medium mt-5 max-sm:text-2xl max-sm:mt-3">图标</div>
    <div class="text-g-800">
      v.3.0 版本图标库升级为 iconify，可在
      <a href="https://icones.js.org/" target="_blank" class="text-theme hover:underline"
        >Iconify</a
      >
      中查找，支持多种图标库，如 Remix Icon, Solar, Tabler Icons 等。
    </div>
    <div class="text-g-800">
      为确保系统图标风格统一，项目全部采用 Remix Icon 图标库，可在
      <a
        href="https://icones.js.org/collection/ri"
        target="_blank"
        class="text-theme hover:underline"
        >Iconify</a
      >
      或<a href="https://remixicon.com/" target="_blank" class="text-theme hover:underline">
        Remix Icon 官网 </a
      >搜索使用。
    </div>
    <el-icon class="close-btn">
      <Close />
    </el-icon>
    <el-icon :size="40" color="#c0c4cc">
      <ShoppingCart />
    </el-icon>
    <!-- Iconify 图标 -->
    <div class="art-card-sm p-5">
      <div class="text-lg font-semibold mb-4">Iconify</div>
      <div class="flex items-center gap-6">
        <ArtSvgIcon icon="ri:github-fill" />
        <ArtSvgIcon icon="ri:copilot-line" class="text-2xl text-theme" />
        <ArtSvgIcon icon="ri:edge-line" class="text-2xl text-secondary" />
        <ArtSvgIcon icon="ri:planet-line" class="text-2xl text-warning" />
        <ArtSvgIcon icon="ri:windows-line" class="text-2xl text-info" />
        <ArtSvgIcon icon="ri:thumb-up-line" class="text-2xl text-danger" />
        <ArtSvgIcon icon="ri:gift-2-line" class="text-2xl text-success" />
        <ArtSvgIcon icon="ri:apple-line" class="text-2xl text-secondary" />
      </div>
    </div>

    <!-- Svg Icons -->
    <div class="art-card-sm p-5">
      <div class="text-lg font-semibold mb-4">Svg Icons</div>
      <div class="flex items-center gap-6">
        <ArtSvgIcon icon="svg-spinners:3-dots-fade" class="text-2xl text-red-400" />
        <ArtSvgIcon icon="svg-spinners:3-dots-bounce" class="text-2xl text-blue-400" />
        <ArtSvgIcon icon="svg-spinners:3-dots-move" class="text-2xl text-orange-400" />
        <ArtSvgIcon icon="svg-spinners:3-dots-rotate" class="text-2xl text-purple-400" />
        <ArtSvgIcon icon="svg-spinners:blocks-shuffle-2" class="text-2xl text-pink-300" />
        <ArtSvgIcon icon="svg-spinners:clock" class="text-2xl text-yellow-500" />
        <ArtSvgIcon icon="svg-spinners:tadpole" class="text-2xl text-orange-500" />
        <ArtSvgIcon icon="svg-spinners:blocks-wave" class="text-2xl text-blue-500" />
      </div>
    </div>

    <!-- Svg Icons -->
    <div class="art-card-sm p-5">
      <div class="text-lg font-semibold mb-4">Material Line Icons</div>
      <div class="flex items-center gap-6">
        <ArtSvgIcon icon="line-md:phone-call-twotone-loop" class="text-4xl text-blue-500" />

        <ArtSvgIcon icon="line-md:switch-off" class="text-3xl text-green-500" />
        <ArtSvgIcon icon="line-md:sun-rising-filled-loop" class="text-2xl text-yellow-400" />
        <ArtSvgIcon icon="line-md:volume-high-filled" class="text-6xl text-purple-500" />
        <ArtSvgIcon icon="line-md:github-twotone" class="text-2xl text-gray-700" />
        <ArtSvgIcon icon="line-md:telegram" class="text-2xl text-sky-500" />
        <ArtSvgIcon icon="line-md:reddit-loop" class="text-2xl text-orange-400" />
        <ArtSvgIcon
          icon="line-md:coffee-half-empty-filled-loop"
          class="text-2xl text-emerald-500"
        />
      </div>
    </div>

    <!-- 使用示例 -->
    <div class="art-card-sm p-5">
      <div class="text-lg font-semibold mb-4">使用示例</div>
      <div class="space-y-4">
        <div>
          <div class="text-sm text-g-600 mb-2">基础使用</div>
          <div class="bg-g-200 dark:bg-g-300/30 p-4 rounded font-mono text-sm text-g-800">
            &lt;ArtSvgIcon icon="ri:home-line" /&gt;
          </div>
        </div>
        <div>
          <div class="text-sm text-g-600 mb-2">自定义大小</div>
          <div class="bg-g-200 dark:bg-g-300/30 p-4 rounded font-mono text-sm text-g-800">
            &lt;ArtSvgIcon icon="ri:user-line" class="text-2xl" /&gt;
          </div>
        </div>
        <div>
          <div class="text-sm text-g-600 mb-2">自定义颜色</div>
          <div class="bg-g-200 dark:bg-g-300/30 p-4 rounded font-mono text-sm text-g-800">
            &lt;ArtSvgIcon icon="ri:heart-fill" class="text-red-500" /&gt;
          </div>
        </div>
        <div>
          <div class="text-sm text-g-600 mb-2">组合使用</div>
          <div class="bg-g-200 dark:bg-g-300/30 p-4 rounded font-mono text-sm text-g-800">
            &lt;ArtSvgIcon icon="ri:star-fill" class="text-4xl text-yellow-500" /&gt;
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="icon-browser">
    <div class="search-box">
      <input v-model="searchQuery" type="text" placeholder="搜索图标..." class="search-input" />
      <select v-model="selectedCollection" class="collection-select">
        <option value="">所有集合</option>
        <option v-for="collection in collections" :key="collection" :value="collection">
          {{ collection }}
        </option>
      </select>
    </div>

    <div class="icons-grid">
      <div
        v-for="icon in filteredIcons"
        :key="icon.name"
        class="icon-item"
        :class="{ selected: selectedIcon === icon.name }"
        @click="selectIcon(icon)"
      >
        <Icon :icon="icon.name" class="icon" />
        <div class="icon-name">{{ getIconShortName(icon.name) }}</div>
      </div>
    </div>

    <div v-if="selectedIcon" class="selected-info">
      <p
        >已选择: <code>{{ selectedIcon }}</code></p
      >
      <button @click="copyIconName">复制图标名称</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'
  import { ShoppingCart, Close } from '@element-plus/icons-vue'

  defineOptions({ name: 'IconPage' })
  import { Icon } from '@iconify/vue'
  import { ref, computed, onMounted } from 'vue'

  interface IconItem {
    name: string
    collection: string
  }

  // 响应式数据
  const searchQuery = ref('')
  const selectedCollection = ref('')
  const selectedIcon = ref('')
  const allIcons = ref<IconItem[]>([])
  const collections = ref<string[]>([])

  // 过滤后的图标列表
  const filteredIcons = computed(() => {
    let filtered = allIcons.value

    if (selectedCollection.value) {
      filtered = filtered.filter((icon) => icon.collection === selectedCollection.value)
    }

    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase()
      filtered = filtered.filter(
        (icon) =>
          icon.name.toLowerCase().includes(query) || icon.collection.toLowerCase().includes(query)
      )
    }

    return filtered.slice(0, 1200) // 限制显示数量
  })

  // 获取图标短名称
  const getIconShortName = (fullName: string) => {
    return fullName.split(':')[1] || fullName
  }

  // 选择图标
  const selectIcon = (icon: IconItem) => {
    selectedIcon.value = icon.name
    emit('select', icon.name)
  }

  // 复制图标名称
  const copyIconName = async () => {
    try {
      await navigator.clipboard.writeText(selectedIcon.value)
      alert('图标名称已复制到剪贴板')
    } catch (err) {
      console.error('复制失败:', err)
    }
  }

  // 加载图标数据
  const loadIcons = async () => {
    try {
      // 这里需要根据实际安装的图标集来加载
      // 示例：加载 Material Design Icons
      const response = await fetch('/node_modules/@iconify/json/json/mdi.json')
      const data = await response.json()

      const icons: IconItem[] = []
      for (const iconName in data.icons) {
        icons.push({
          name: `mdi:${iconName}`,
          collection: 'mdi'
        })
      }

      allIcons.value = icons
      collections.value = ['mdi'] // 可以加载多个集合
    } catch (error) {
      console.error('加载图标失败:', error)
    }
  }

  const emit = defineEmits<{
    select: [iconName: string]
  }>()

  onMounted(() => {
    loadIcons()
  })
</script>
<style scoped>
  .icon-browser {
    max-height: 600px;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  .search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .search-input,
  .collection-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 16px;
  }

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s;
  }

  .icon-item:hover {
    background-color: #f5f5f5;
    border-color: #007bff;
  }

  .icon-item.selected {
    color: white;
    background-color: #007bff;
    border-color: #007bff;
  }

  .icon {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .icon-name {
    font-size: 12px;
    text-align: center;
    word-break: break-all;
  }

  .selected-info {
    padding: 16px;
    margin-top: 20px;
    background-color: #f8f9fa;
    border-radius: 6px;
  }
</style>
